<template>
    <div class="detail_module_panel other_info">
      <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('xsDetails.materialInfo')}}</h3>
      <div class="panel_info_content">

        <el-row class="row">
          <el-col class="label" :span="4">{{$t('xsDetails.financeInfoCollect')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.bankCardImg)">
                <a @click="showImg(userData.bankCardImg)" :style="backgroundImg(userData.bankCardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.bankCardPic')}}</span>
              </li>
              <li v-if="showSource(userData.creditCardImg)">
                <a @click="showImg(userData.creditCardImg)" :style="backgroundImg(userData.creditCardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.creditCardPic')}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col class="label" :span="4">{{$t('xsDetails.idInfoCollect')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.ocrUrl)">
                <!--OCR照片  v-if="userData.userCardInfoIsChange"-->
                <a @click="showImg(userData.ocrUrl)" :style="backgroundImg(userData.ocrUrl)" href="javascript:void(0);"></a>
                <span class="img_desc">OCR</span>
              </li>
              <li v-if="showSource(cardPositiveImgUrl)">
                <!--身份证正面-->
                <!--<a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>-->
                <a @click="showImg(cardPositiveImgUrl)" :style="backgroundImg(cardPositiveImgUrl)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.idCardFrontSide')}}</span>
              </li>
              <li v-if="showSource(userData.cardImg)">
                <!--手持身份证照片-->
                <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.handCardPic')}}</span>
              </li>
              <li v-if="showSource(userData.furtherCardIdImg)">
                <!--补充身份证信息-->
                <a @click="showImg(userData.furtherCardIdImg)" :style="backgroundImg(userData.furtherCardIdImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.addIdCardImg')}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col class="label" :span="4">{{$t('xsDetails.otherInfoCollect')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.driverLicenseImg)">
                <a @click="showImg(userData.driverLicenseImg)" :style="backgroundImg(userData.driverLicenseImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.driverCard')}}</span>
              </li>
              <li v-if="showSource(userData.familyCardImg)">
                <a @click="showImg(userData.familyCardImg)" :style="backgroundImg(userData.familyCardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.familyCard')}}</span>
              </li>
              <!--行驶证-->
              <li v-if="showSource(userData.drivingLicenseImg)">
                <a @click="showImg(userData.drivingLicenseImg)" :style="backgroundImg(userData.drivingLicenseImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.drivingLicense')}}</span>
              </li>
              <li v-if="showSource(userData.furtherImgOne)">
                <!--补充信息1-->
                <a @click="showImg(userData.furtherImgOne)" :style="backgroundImg(userData.furtherImgOne)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.addOtherImg1')}}</span>
              </li>
              <li v-if="showSource(userData.furtherImgTwo)">
                <!--补充信息2-->
                <a @click="showImg(userData.furtherImgTwo)" :style="backgroundImg(userData.furtherImgTwo)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.addOtherImg2')}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col class="label" :span="4">{{$t('xsDetails.videoAgreement')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.videoUrl)">
                <a @click="showImg(userData.videoUrl, true)" :class="{'video_placeholder': !!userData.videoUrl}" class="video" href="javascript:void(0);"><i v-if="userData.videoUrl" class="video_icon"></i></a>
              </li>
            </ul>
          </el-col>
        </el-row>
        <!--活体检测-->
        <el-row class="row">
          <el-col class="label" :span="4">{{$t('xsDetails.bioAssayPhoto')}}</el-col><!--活体检测抓拍照片-->
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userBioassayInfo.url)">
                <a @click="showImg(userBioassayInfo.url)" :style="backgroundImg(userBioassayInfo.url)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.bioAssay')}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row class="row work_student_img">
          <el-col class="label" :span="4">{{$t('xsDetails.workCertification')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.empCarImg)">
                <a @click="showImg(userData.empCarImg)" :style="backgroundImg(userData.empCarImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.employeeCardPic')}}</span>
              </li><!--员工卡照片-->
              <li v-if="showSource(userData.payrollImg)">
                <!--<a @click="showImg(userData.payrollImg)" :style="backgroundImg(userData.payrollImg)" href="javascript:void(0);"></a>-->
                <a @click="showImg(userData.payrollImg)" :style="backgroundImg(userData.payrollImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.salaryCardPic')}}</span>
              </li><!--工资卡照片-->
              <li v-if="showSource(userData.proofEmpImg)">
                <a @click="showImg(userData.proofEmpImg)" :style="backgroundImg(userData.proofEmpImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.onWorkingCertificationPic')}}</span>
              </li><!--在职证明-->
              <li v-if="showSource(userData.staffImg)">
                <a @click="showImg(userData.staffImg)" :style="backgroundImg(userData.staffImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.staffImg')}}</span>
              </li><!--工作制服照片-->
              <li v-if="showSource(userData.depositSlipImg)">
                <a @click="showImg(userData.depositSlipImg)" :style="backgroundImg(userData.depositSlipImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.deposit')}}</span>
              </li><!--存款单-->
              <li v-if="showSource(userData.otherImg)">
                <a @click="showImg(userData.otherImg)" :style="backgroundImg(userData.otherImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.otherImg')}}</span>
              </li><!--其他照片-->
            </ul>
          </el-col>
        </el-row>
        <el-row class="row work_student_img">
          <el-col class="label" :span="4">{{$t('xsDetails.salaryCertification')}}</el-col>
          <el-col class="info" :span="20">
            <ul class="imgs">
              <li v-if="showSource(userData.taxCardImg)">
                <a @click="showImg(userData.taxCardImg)" :style="backgroundImg(userData.taxCardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.steuerkarte')}}</span>
              </li><!--税卡-->
              <li v-if="showSource(userData.socialSecCardImg)">
                <a @click="showImg(userData.socialSecCardImg)" :style="backgroundImg(userData.socialSecCardImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{$t('xsDetails.sinCard')}}</span>
              </li><!--社保卡-->
            </ul>
          </el-col>
        </el-row>
        <!--活体检测end-->
        <!--matchStatus-->
      </div>
      <show-image-video :visible.sync="showImgDialog" :video-src="videoUrl" :img-src="imgUrl">图片展示</show-image-video>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
</template>

<script>
  import uploadImage from '@/components/upload-image';
  import ShowImageVideo from '@/components/show-image-video';

  let that = null;
  export default {
    name: 'otherInfo',
    props: {
      userData: {
        type: Object
      },
      userId: {
        default: ''
      },
      userBioassayInfo: {
        type: Object,
        default: ()=>({})
      }
    },
    components: {
      ShowImageVideo,
      uploadImage
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        showImgDialog: false,
        imgUrl: '',
        videoUrl: '',
        bankData: [],
        imgObj: {
          id: '',
          url: '',
        },
        imgObjTwo: {
          id: '',
          url: '',
        },
        cardPositiveImg: '',
        cardNegativeImg: '',
      };
    },
    computed: {
      // 身份证正面，兼容处理，如果有身份证变动，则显示变动，如果OCR和变动都没有，则显示上传的身份证
      cardPositiveImgUrl() {
        const { userData } = this;
        if (userData.userCardInfoIsChange) {
          return userData.userCardInfoIsChange;
        } else if (!userData.ocrUrl && !userData.userCardInfoIsChange && userData.cardPositiveImg) {
          return userData.cardPositiveImg;
        }
        return '';
      },
    },
    watch: {
      'imgObj.url'(val) {
        if (val) {
          this.changeImg();
        }
      },
      'imgObjTwo.url'(val) {
        if (val) {
          this.changeImg();
        }
      },
    },
    methods: {
      showSource(source){
        // console.log(source)
        return source!=''
      },
      backgroundImg(url) {
        // 构造图片展示
        const style = {};
        if (url) {
          style.backgroundImage = 'url("' + url + '")';
        }
        return style;
      },
      showImg(url, video) {
        if (video && url) {
          this.videoUrl = url;
          // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
          this.imgUrl = '';
          this.showImgDialog = true;
        } else if (!video && url) {
          this.showImgDialog = true;
          this.imgUrl = url;
          this.videoUrl = '';
        }
      },
      bankRowClassName(row, index) {
        if (row.status && row.status === '0') {
          return 'red_color';
        }
        return '';
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 添加图片
      changeImg() {
        const params = {
          cardPositiveImg: this.imgObj.url,
          cardNegativeImg: this.imgObjTwo.url,
          userId: this.userId,
          userType: '1',
        };
        this.$api.customer.addUserCardInfo(params).then((res) => {
          const { status, data } = res;
          if (status === '1') {
          //
          }
        });
      },
    //  查看图片
      checkImg() {
        const params = {
          userId: this.userId,
          userType: '1',
        };
        this.$api.customer.findUserCardInfo(params).then((res) => {
          const { status, data } = res;
          if (status === '1' && data) {
            this.cardPositiveImg = data.cardPositiveImg;
            this.cardNegativeImg = data.cardNegativeImg;
          }
        });
      },
    },
    created() {
      that = this;
      if (this.$route.params.id) {
        this.locale = this.$route.params.lang;
        this.orderId = this.$route.params.orderId;
        this.checkImg();
      }
    },
    filters: {
      // 银行卡认证状态
      bankCardStatus(account) {
        switch (account) {
          case 'PENDING':
            return that.$t('csDetails.pending');
          case 'SUCCESS':
            return that.$t('csDetails.pass');
          case 'FAILURE':
            return that.$t('csDetails.notPass');
          case 'CALLBACK_SUCCESS':
            return that.$t('csDetails.pass');
          default :
            return '--';
        }
      },
      // 活体检测结果
      bioAssayResult(result) {
        switch (result) {
          case '0':
            return that.$t('xsDetails.fail'); // '失败';
          case '1':
            return that.$t('xsDetails.success'); // '成功';
          default:
            return '';
        }
      },
      // 活体检测与身份证对比
      bioAssayMatchIdCard(result) {
        switch (result) {
          case '0':
            return that.$t('xsDetails.matching'); // '匹配中'
          case '1':
            return that.$t('xsDetails.matchFail'); // '不匹配'
          case '2':
            return that.$t('xsDetails.matchSuccess'); // '匹配';
          default:
            return '';
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  .video{
    /*background-color: rgba(0, 0, 0, 0.4)!important;*/
  }
  .video_placeholder{
    background-image: url("~@/assets/img/vidoe_placeholder.png");
    background-repeat: no-repeat;
    /*background-position: 50% -20px!important;*/
    background-size: contain!important;
    background-color: #fff!important;
  }
  .video_icon{
    display: block;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
    background-image: url("~@/assets/img/icon_video.png");
  }
  .el-table .red_color {
    color: #FF4949;
  }
  .blue {
    margin-left: 10px;
    color: #1983fa;
    font-weight: bold;
  }
  .color_red{
    color: #ff3b30;
  }
</style>
